<template>
  <ul
    :list="list"
    class="ant-list-items ant-list-bordered"
    @drop="onDrop"
    @dragover="onDragOver"
  >
    <li
      class="ant-list-item"
      v-for="(element, index) in list"
      :key="element.id"
      :class="{
        active: element.id === selectedId,
        ghost: dragData.currentDragging === element.id,
      }"
      @click="handleClick(element.id)"
      draggable="true"
      :data-index="index"
      @dragstart="onDragStart($event, element.id, index)"
      @dragenter="onDragEnter($event, index)"
    >
      <a-tooltip :title="element.isHidden ? '显示' : '隐藏'">
        <a-button
          shape="circle"
          @click.stop="handleChange(element.id, 'isHidden', !element.isHidden)"
        >
          <template v-slot:icon v-if="element.isHidden">
            <EyeOutlined />
          </template>
          <template v-slot:icon v-else><EyeInvisibleOutlined /> </template>
        </a-button>
      </a-tooltip>
      <a-tooltip :title="element.isLocked ? '解锁' : '锁定'">
        <a-button
          shape="circle"
          @click.stop="handleChange(element.id, 'isLocked', !element.isLocked)"
        >
          <template v-slot:icon v-if="element.isLocked"
            ><UnlockOutlined />
          </template>
          <template v-slot:icon v-else><LockOutlined /> </template>
        </a-button>
      </a-tooltip>
      <inline-edit
        class="edit-area"
        :value="element.layerName ? element.layerName : ''"
        @change="
          (value) => {
            handleChange(element.id, 'layerName', value);
          }
        "
      />
      <a-tooltip title="拖动排序">
        <a-button shape="circle" class="handle">
          <template v-slot:icon><DragOutlined /> </template
        ></a-button>
      </a-tooltip>
    </li>
  </ul>
</template>
<script lang="ts">
import { defineComponent, PropType, reactive } from "vue";
import { arrayMoveMutable } from "array-move";
import {
  EyeOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  UnlockOutlined,
  DragOutlined,
} from "@ant-design/icons-vue";
import { ComponentData } from "../store/editor";
import InlineEdit from "./InlineEdit.vue";
import { getParentElement } from "@/utils/helper";
export default defineComponent({
  props: {
    list: {
      type: Array as PropType<ComponentData[]>,
      required: true,
    },
    selectedId: {
      type: String,
      // required: true,
    },
  },
  components: {
    EyeOutlined,
    EyeInvisibleOutlined,
    LockOutlined,
    UnlockOutlined,
    DragOutlined,
    InlineEdit,
  },
  emits: ["select", "change", "drop"],
  setup(props, { emit }) {
    let start = -1;
    let end = -1;
    const dragData = reactive({
      currentDragging: "",
      currentIndex: -1,
    });
    const onDragStart = (e: DragEvent, id: string, index: number) => {
      dragData.currentDragging = id;
      dragData.currentIndex = index;
      start = index;
      // e.dataTransfer?.setDragImage(e.target as HTMLElement, 100, 100);
      // 可以自定义 拖拽图像
    };
    const handleClick = (id: string) => {
      emit("select", id);
    };
    const onDragOver = (e: DragEvent) => {
      e.preventDefault();
    };
    const onDragEnter = (e: DragEvent, index: number) => {
      if (index !== dragData.currentIndex) {
        arrayMoveMutable(props.list, dragData.currentIndex, index);
        dragData.currentIndex = index;
        end = index;
      }
    };
    // onDragOver 定时查询移动端像素
    // 可以做精确的下沿判断
    const onDrop = (e: DragEvent) => {
      // onDragEnter即可触发 下部分代码暂时不需要
      // const currentEle = getParentElement(
      //   e.target as HTMLElement,
      //   "ant-list-item"
      // );
      // // const currentEle = e.target as HTMLElement;
      // if (currentEle && currentEle.dataset.index) {
      //   const moveIndex = Number(currentEle.dataset.index);
      //   console.log(moveIndex);
      //   arrayMoveMutable(props.list, dragData.currentIndex, moveIndex);
      // }
      // 截止
      emit("drop", { start, end });
      dragData.currentDragging = "";
    };
    const handleChange = (id: string, key: string, value: boolean) => {
      const data = {
        id,
        key,
        value,
        isRoot: true,
      };
      emit("change", data);
    };
    return {
      handleChange,
      handleClick,
      onDragStart,
      dragData,
      onDrop,
      onDragOver,
      onDragEnter,
    };
  },
});
</script>

<style scoped>
.ant-list-item {
  padding: 10px 15px;
  transition: all 0.5s ease-out;
  cursor: pointer;
  justify-content: normal;
  border: 1px solid #fff;
  border-bottom-color: #f0f0f0;
}
.ant-list-item.active {
  border: 1px solid #1890ff;
}
.ant-list-item.ghost {
  opacity: 0.5;
}

.ant-list-item:hover {
  background: #e6f7ff;
}
.ant-list-item > * {
  margin-right: 10px;
}
.ant-list-item button {
  font-size: 12px;
}

.ant-list-item .handle {
  cursor: move;
  margin-left: auto;
}
.ant-list-item .edit-area {
  width: 100%;
}
</style>
